<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html style="width:100%; height:100%">
    <head>
        <title>温莎KTV管理平台</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <style>
            * {
                padding: 0;
                margin:0
            }
        </style>

    </head>
    <body style="width:100%; height:100%">
        <iframe id="frame" style="width:100%; height:99.2%;border: 0;overflow: auto;" src="http://ws.surface-homes.com/manage"></iframe>
        <div id="app"></div>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
        <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
        <!-- import Vue before Element -->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <!-- import JavaScript -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script>
            var host = 'http://ws.surface-homes.com';
            var audio = new Audio();
            var mp3 = [host+'/manage/Api/audio?content=语音开启成功'];
            audio.src = mp3[0];
            audio.play().then(() => {

            }).catch((err) => {
                layer.confirm('是否允许浏览器播放声音', {
                }, function () {
                    layer.closeAll();
                    audio.play()
                })
            });
            var socket = io('http://' + document.domain + ':2120');
            // 连接后登录
            socket.on('connect', function (respon) {

            });

            socket.on('msg', function (msg) {
                console.log(msg)
            });

            /*socket.on('notice', function (msg) {
                mp3.push('http://www.wensha.com/manage/Api/audio?content=' + msg);
                if (mp3.length <= 1) {
                    audio.src = mp3[0];
                    audio.play();
                }
            });*/

            audio.addEventListener('ended', function () {
                if (mp3.length > 1) {
                    audio.src = mp3.shift();
                    audio.play();
                } else if (mp3.length == 1) {
                    mp3.shift();
                } else {
                    console.log('播完了');
                }
            }, false);

            new Vue({
                el: '#app',
                data: function () {
                    return {visible: false}
                },
                created() {
                    var _this = this;
                    socket.on('notice', function (msg) {
                        var resule = JSON.parse(msg)
                        mp3.push(host+'/manage/Api/audio?content=' + resule.notice);
                        if (mp3.length <= 1) {
                            audio.src = mp3[0];
                            audio.play();
                        }
                        _this.$notify({
                            title: '消息通知',
                            message: resule.notice,
                            position: 'bottom-right',
                            duration: 20000,
                            onClick: function() {
                                $('#frame').attr('src', host+resule.url)
                            }
                        });
                    });
                    
                }
            })
        </script>
    </body>
</html>
